<template>
  <div>
    <div class="menu">
      <div v-if="isShowMenu">
        <div class="menu-item collection" @click="$router.push({ path: '/profile/collection-history/collection-products' })">
          <div class="collection-item"></div>
          收藏产品
        </div>
        <div class="menu-item enterprise" @click="$router.push({ path: '/profile/collection-history/collection-company' })">
          <div class="enterprise-item"></div>
          收藏企业
        </div>
        <Popover placement="left" width="240" trigger="hover">
          <img src="@/assets/images/code.png" alt="" />
          <div class="menu-item vx-service" slot="reference">
            <div class="vx-service-item"></div>
            微信客服
          </div>
        </Popover>
        <div class="menu-item on-service" style="border-top:1px solid rgb(233,233,233);">
          <div class="on-service-item"></div>
          在线客服
        </div>
        <div class="menu-item proposal" @click="$router.push({ path: '/suggest' })">
          <div class="proposal-item"></div>
          提交建议
        </div>
        <div class="menu-item history" @click="$router.push({ path: '/profile/collection-history/browsing-history' })">
          <div class="history-item"></div>
          浏览历史
        </div>
      </div>
      <div class="menu-item hide_buttons" @click="isShowMenu = !isShowMenu">
        <i class="el-icon-arrow-left" v-if="!isShowMenu"></i>
        {{ isShowMenu ? '收起' : '展开' }}
        <i v-if="isShowMenu" class="el-icon-arrow-right"></i>
      </div>
    </div>
    <div class="backMiddle">
      <div class="backtop" v-if="isShowBackTop" @click="backTop"><img src="~@/assets/images/home/backtop.png" alt="" /></div>
    </div>
  </div>
</template>

<script>
import { Popover } from 'element-ui';

export default {
  name: 'Menu',
  components: {
    Popover
  },
  data() {
    return {
      isShowMenu: true,
      isShowBackTop: false
    };
  },
  created() {
    window.addEventListener('scroll', this.windowScroll);
  },
  methods: {
    windowScroll() {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      this.isShowBackTop = scrollTop >= 200;
    },
    backTop() {
      var timer = null;
      cancelAnimationFrame(timer);
      timer = requestAnimationFrame(function fn() {
        var oTop = document.body.scrollTop || document.documentElement.scrollTop;
        if (oTop > 0) {
          scrollTo(0, oTop - 500);
          timer = requestAnimationFrame(fn);
        } else {
          cancelAnimationFrame(timer);
        }
      });
    }
  }
};
</script>

<style scoped>
.menu {
  position: fixed;
  top: 50%;
  width: 60px;
  right: 0;
  /* padding-bottom: 0; */
  transform: translateY(-50%);
  text-align: center;
  background: #fff;
  box-shadow: 0px 0px 6px 0px rgba(180, 178, 178, 0.17);
  border-radius: 10px;
  z-index: 999;
}
.menu .menu-item {
  position: relative;
  padding-bottom: 10px;
  font-size: 12px;
  cursor: pointer;
}
.menu .menu-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 1px;
  background: rgba(233, 233, 233, 1);
}
.menu .menu-item:last-child::after {
  height: 0;
}
.menu .menu-item div {
  display: block;
  height: 26px;
  width: 26px;
  margin: 5px auto;
}
.menu .menu-item .wechat-web {
  position: absolute;
  top: 0;
  left: -80%;
}
.menu .menu-item.top:hover {
  /* background-color: rgba(0,0,0,.5); */
}
.collection-item {
  background: url('~@/assets/images/shoucanglogo.png') no-repeat;
  background-size: 60px;
  overflow: hidden;
  background-position: -4.5px 0;
}

.collection:hover .collection-item {
  background-position: -30.5px 0;
}

.enterprise-item {
  background: url('~@/assets/images/leftnav.png') no-repeat;
  background-size: 55px;
  overflow: hidden;
  background-position: 1px -28px;
}

.enterprise:hover .enterprise-item {
  background-position: -29.5px -28px;
}

.vx-service-item {
  background: url('~@/assets/images/leftnav.png') no-repeat;
  background-size: 55px;
  overflow: hidden;
  background-position: 1px -58px;
}

.vx-service:hover .vx-service-item {
  background-position: -29.5px -58px;
}

.on-service-item {
  background: url('~@/assets/images/leftnav.png') no-repeat;
  background-size: 55px;
  overflow: hidden;
  background-position: 1px -90px;
}

.on-service:hover .on-service-item {
  background-position: -29.5px -90px;
}

.proposal-item {
  background: url('~@/assets/images/leftnav.png') no-repeat;
  background-size: 55px;
  overflow: hidden;
  background-position: 1px -120px;
}

.proposal:hover .proposal-item {
  background-position: -29.5px -120px;
}

.history-item {
  background: url('~@/assets/images/leftnav.png') no-repeat;
  background-size: 55px;
  overflow: hidden;
  background-position: 1px -152px;
}

.history:hover .history-item {
  background-position: -29.5px -152px;
}

.top-item {
  background: url('~@/assets/images/leftnav.png') no-repeat;
  background-size: 55px;
  overflow: hidden;
  background-position: 1px -182px;
  margin-top: 10px;
}

.top:hover .top-item {
  background-position: -29.5px -182px;
}

.menu .menu-item:hover {
  color: #e48b2c;
}
.hide_buttons {
  padding: 10px;
  color: #e48b2c;
}
.backMiddle {
  width: 1200px;
  margin: 0 auto;
  /* background: #e48b2c; */
  position: fixed;
  bottom: 200px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
}
.backtop {
  width: 50px;
  height: 50px;
  background: rgba(217, 217, 217, 0.8);
  position: absolute;
  right: -60px;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  cursor: pointer;
  z-index: 1000;
}
.backtop img {
  width: auto;
  height: auto;
  object-fit: contain;
}
</style>
